TOC Glossary Forward

Creating Your Web Page

In this chapter I explain how to make your own home page and how to comfortably begin creating a set of related pages. First, I talk about HTML (HyperText Markup Language) 2.0, the language of the Web, complete with nformation about how to make links, include graphics, and test a Web page. I also give suggestions about what you might put on a page and give a few pointers for when to consider using features coming in the final HTML 3.0 specification. Toward the end, you'll find a collection of capsule reviews covering a number of Web authoring tools and contact information for a few valuable Web-authoring resources.

Note: To spare you the agony of correctly typing URLs into your Web browser, I have created a Web page that includes links to the Web URLs mentioned in this chapter.

http://www.mcp.com/hayden/iskm/html-resources.html

Also, to give credit where credit is due, this chapter was written by my wife, Tonya Engst, who's become a major Web and HTML aficionado in recent months and who was eminently qualified to write it. Without her work on this chapter, it would have been much harder to finish this edition in a timely fashion.

Web Authoring Preview

When you create a Web page, you are a Web author, and hence -- to use the slang appropriately -- you are authoring a Web page. On a difficulty scale of 1 to 10, with 1 being easy, authoring a Web page rates about a 3. All you need is a word processor, attention to detail, common sense, and a place to serve your page where others can access it with Web browsers.

You can create a Web page in any word processing program, and if you don't have a word processor (or you dislike your word processor) you can use a text editor such as SimpleText or BBEdit. Once you know a little about making Web pages, you may want to try software designed for Web authoring. You can read about such software later in this chapter.

Web pages consist of text marked with HTML tags that give a Web browser guidelines for how to show the text. For example, to emphasize something, you enclose it in a pair of <em> tags, like this: <em>Pay Attention!</em>. A Web browser will then show Pay Attention! in an emphasized way (perhaps in bold or italic) to make it stand out visually. Attention to detail counts, because HTML tags are picky little things and typographical errors can wreak havoc on even simple pages.

Common sense also counts when it comes to creating a Web page. HTML is a subset of another markup language called SGML, which stands for Structured Generalized Markup Language. The "structured" in SGML's name is important. Most HTML tags set the structure of a page, not what a page looks like. Think about it. People all over the world use the Web with all sorts of computers (and in the next few years we many even have devices like Web-based speech synthesizers). You can't count on Web browsers to display layout details such as white space or columns; you can't count on them to display typographical niceties such as fonts; and you certainly can't count on them to display pictures. As a result, well-done Web pages primarily use structural tags that emphasize text, make strong statements, set up lists, and create topic headings.

Note: SGML is actually a language for creating other languages, which are then called DTDs, or Document Type Definitions. HTML is an example of a DTD.

Before you jump in and author a Web page, decide how you will serve it to the Internet. You must find an organization that will serve your page, thus making it available to anyone using the Web. You might ask your Internet provider or your system adminstrator. Many schools and businesses serve employee and student home pages, and an ever-increasing number of commercial Internet providers serve the home pages of their customers (usually at a low cost or free to individuals). After you find an organization that will serve your page, ask about these issues:

  1. You might want to serve more than one page -- if you serve several pages, you may be able to better organize your information and create hypertext links between pages. Ask if you can serve a folder's worth of related pages and graphics. Ask if the folder has a size limit.

  2. The Web is picky about file names, and file names must end with an extension that indicates the file type. For example, a Web page coded in HTML needs a .htm or .html extension. The specific extension depends on the server that serves your files. Also, the length of a file name may be limited by the server.

  3. Ask how you can update your pages.

  4. Ask if there is any charge for serving your pages, and ask if there are any extra charges if they prove enormously popular.

Note: You can easily run your own Web server on a Macintosh, but it's not terribly realistic unless you have a permanent Internet connection, preferably something at least as fast as a 56 Kbps hookup. Check these Web pages for more information on setting up a Web server:

http://abs.apple.com/apple-internet/providers/

http://www.uwtc.washington.edu/Computing/WWW/CreatingASite.html

Introduction to HTML

HTML is tag-oriented. An HTML document begins with the tag <html>, ends with the tag </html>, and anything between those two tags is either basic text or another tag. Put the right tags and text together, and you end up with a nifty Web page.

HTML has two types of tags: single and paired. A single tag sits by itself and tells a Web browser to do something specific. For example, the <hr> tag tells a Web browser to insert a horizontal rule. Paired tags come in twos, and they surround the text they apply to. The ending tag always includes a forward slash right after its beginning bracket. For example, the <strong> tag pair works like this: <strong>I love you!</strong>. The <strong> tag pair codes for strength, and a Web browser will interpret the pair by giving the phrase "I love you!" a strong appearance (which may in fact vary depending on which Web browser the readers use and how it is set up).

Note: If I wanted to show how the <strong> tag pair works without giving a specific example, I would write: <strong> . . . text . . . </strong>. Later in this chapter, you'll see tag pairs explained in this way, so don't say I didn't warn you!

Note: You can type tags in either uppercase or lowercase -- it makes no difference. You may see both in examples of HTML on the Web.

A Web page has two main parts: the head and the body. The head contains introductory and descriptive matter, such as a title, and the body contains everything else, except for the ending </html> tag. The text and tags for the basic Web page shown in figure 26.1 look like the following:

Figure 26.1

A Web browser doesn't show HTML tags; instead it shows a title and body text.

As you can see in figure 26.1, the Web browser uses the <html>, <head>, and <body> tags behind the scenes. Anyone viewing the page sees only the title and body text. If you type lots of text between the <body> tag pair, the text would show on the Web page as one long paragraph.

Note: Many of the screenshots in this chapter show glimpses of a Web page titled "Ingrid's Penguin Page." Feel free to use your Web browser to view the source of Ingrid's Penguin Page and to re-use the HTML code.

http://www.mcp.com/hayden/iskm/ingrid.html

Tags for Text

HTML has a number of tags for text, which you use within the body of an HTML document to set up the structure and appearance of a page.

New Paragraphs and Lines

Web browsers do handle word wrap, such that text automatically wraps down to the next line, but they typically do not understand the idea of pressing Return to start a new line or paragraph. Even if you press Return to start new paragraphs within an HTML document, Web browsers ignore those Return characters.

Fortunately, HTML includes tags for starting a new paragraph and for starting a new line. The new paragraph tag, <p>, typically puts some space above the paragraph, but the new line tag, <br>, starts a new line without adding extra space (see figure 26.2). Here is a snippet of HTML code with <p> and <br> tags:

Figure 26.2: The extra space above "Ingrid Penguin" is due to a <p> tag.

Topic Headings

Web pages use topic headings to help viewers understand the flow of information. The <h1> pair is for the most important headings, the <h2> pair is for the next most important headings, and so on, all the way to the <h6> pair, which is for headings at the sixth level of importance. Figure 26.3 shows the <h2> topic heading coded as follows:

Figure 26.3: Other Penguins on the Web is an h2-level heading.

Note: Text after a heading doesn't need to start with a <p> or <br> tag; Web browsers assume text after a heading starts on a new line.

Lists and Glossaries

HTML makes it easy to create numbered and bulleted lists. People familiar with HTML call a numbered list an ordered list, and tag it with the <ol> pair (and Web browsers put in the numbers for you). They call a bulleted list an unordered list, and tag it with the <ul> pair (and Web browsers put in the bullets for you). Lists also require the single tag <li>, which precedes each list entry. Figure 26.4 shows the result of this code snippet for an unordered list:

Figure 26.4: The <ul> and <li> tags turn into a bulleted list.

A glossary is a fancy list of terms and definitions (see figure 26.5). In HTML, the <dl> tag surrounds a glossary (think of dl as standing for Definition List), the <dt> tag begins a term, and the <dd> tag begins a definition, usually indented from the term. To see how the tags work, check out this sample:

Figure 26.5: The <dl>, <dt>, and <dd> tags turn into a glossary-like list.

Addresses -- Snail Mail and Email

It's polite to end your home page with contact information so viewers can get in touch with you. If you include a snail mail address, you might enclose it in the <address> tag pair.

A snail mail address has a solid, traditional feel to it, but sharing your email address usually makes more sense. You can, of course, just type your email address in the text of your page, but just typing your email address brands you as a rank novice when it comes to HTML; instead, you should make a mailto link, which some Web browsers can use. Figure 26.6 shows the bottom of a Web page, complete with a mailto link.

Figure 26.6: A snail mail and email address, displayed in a Web browser.

Take a look at the code behind figure 26.6:

The first part of the code shows the <address> tag pair in action, and the last line shows an example of an anchor tag pair, which gets coded with <a> . . .text . . .</a>. Anchor tags can do many different things in HTML, and I talk more about them in the Links section of this chapter.

In this example, the anchor tag links to an email address, and the anchor tag does this by including an attribute inside the beginning tag. An attribute gives a Web browser more information about the tag. In this case, the attribute is an href, and it specifies that the text between the tags should appear as a link (href stands for Hypertextual REFerence). If someone clicks the link, the Web browser brings up a window or calls another program to send email, with ingrid@tidbits.com in the To field.

Note: Some browsers don't support mailto URLs, and others do support them but must be set up correctly. Fortunately, if a reader's browser doesn't work with mailto URLs, he can still see the email address and transcribe it manually.

Typographical Styles

As Mac users, we are accustomed to having options for styling text every which way. Most traditional design advice that I've read about styling cautions against using too many formats on one page, and that caution holds true for HTML as well. Fortunately, HTML offers far fewer formatting choices, and your chances of committing a typographical faux pas are far less, especially if you remember that italics usually look lousy onscreen.

HTML's typographical tags come in two main categories: physical and logical. Physical tags dictate exactly what the text should look like (assuming the browser can display it). HTML offers physical tags for:

Because the point of HTML is to convey meaning and structure, it makes sense to use logical typographical tags instead of physical ones.

Here are some of the more useful logical tags:

If you write a software tutorial in HTML, you might also use these logical tags:

Note: Never use a heading tag where you should use a strong or emphasis tag instead. A heading tag may make the text look big and important in some browsers, but it will look just plain stupid in other browsers. Also, some Web pages are devoted to sharing lists of badly done Web pages, and I'd hate for your page to end up on one of those lists.

http://turnpike.net/metro/mirsky/Worst.html

Entities -- Coding for Special Characters

First, the good news -- most normal every day text characters work fine You just type them in the body of your HTML document. Second, the bad news -- you do have to code for HTML's four reserved characters (>, <, ", and &) and for upper ASCII character set characters.

ASCII stands for American Standard Code for Information Interchange, and the lower ASCII character set, also known as 7-bit ASCII, consists of 128 characters, each with an assigned number. Of those 128 characters, about 100 are for letters and numbers that people use. On an English keyboard, pretty much any character that appears is part of lower ASCII; with non-English keyboards, your mileage may vary considerably.

The upper ASCII character set adds another 128 characters to the lower ASCII character set, and the lower and upper ASCII character sets are collectively known as 8-bit ASCII. Bullets, accented characters, and other special characters come from upper ASCII. Unfortunately, different computers and programs use different upper ASCII character sets. When you type an upper ASCII character on the Mac, it's unlikely to be the same character when viewed through a Web browser, which uses a standard called ISO Latin-1 for its upper ASCII characters.

Named and Numbered Entities

You can tag for several upper ASCII characters with named entities. A named entity is a special code that begins with an ampersand, continues with a name, and ends with a semicolon. Table 26.1 shows a few examples of named entities. You can find a full list of ISO Latin-1 characters and their entities at:

http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html 

                 Table 26.1: Tagging for upper ASCII characters
   
                         Character     Named entity

                         á             &aacute;
                         é             &eacute;
                         ñ             &ntilde;

Note: You can also specify ISO Latin-1 characters using numbered entities (where numbers specify the characters), but Web browsers frequently fail to display them correctly, so I recommend that you do not use them.

Reserved Characters

HTML reserves four characters for its tags, and you can't always use those characters as regular text and have them come out right. The reserved characters are the left angle bracket (<), the right angle bracket (>), the straight double quote (") and the ampersand (&). To code for these characters, use special named entities (see Table 26.2). 

                  Table 26.2: Tagging for reserved characters

                             Character     Tag

                              <             &lt;
                              >             &gt;
                              &             &amp;
                              "             &quot;

Quotations

If you put a long quotation on a Web page, you might set it off in a special way, using the <blockquote> pair. Web browsers typically indent or italicize blockquoted text.

If you want quotation marks to surround a quote, use the double quotation mark entity (") that I explained previously. Many Web browsers will display a double straight quote even if you type " and don't use the entity, but it's considered bad form not to use the entity.

If you use a word processor to type HTML and the word processor automatically types curly quotes when you press the quote key, you must turn off the curly quotes. Look for a Preferences or Options command, or if your program has an automatic-correction feature, this may be where you turn off curly quotes. You might also set the automatic-correction feature (or a glossary feature) to automatically type " when you type ".

Preformatted Text, Specially Formatted Text, and HTML 3.0

"But, but, but..." you may be sputtering. "I need some text to appear in Web browsers exactly the way it shows on my computer." For example, if you need to present tabular information in a monospaced font (such as Monaco), you don't want the font to turn into a proportional font (such as Times) up on the Web, because your carefully aligned columns will turn into alphabet soup. Luckily, help is at hand, in the form of the <pre> tag pair. Surround your text with the <pre> tag pair, and it will display in a monospaced font, exactly as you typed it. You won't even need to use <br> or <p> tags.

If you aren't worried about presenting tabular information, but do want to totally control the look of your text, consider creating a graphic and displaying the graphic on your Web page (graphics are covered a little later in this chapter).

As I write this, HTML is at version 2.0, but a finalized HTML 3.0 is coming soon. HTML 3.0 will specify more layout- and typographically-oriented tags (probably including tags for tables and fonts), and some Web browsers (most notably Netscape) already support additional formatting tags, many of which may appear in HTML 3.0. If you are interested in this topic I strongly recommend that you read the Introduction to the HyperText Markup Language Specification Version 3.0.

http://www.hpl.hp.co.uk/people/dsr/html/Contents.html

Also, Netscape Communications has posted information about additional tags supported by its browsers.

http://home.netscape.com/assist/net_sites/html_extensions.html

Note: In case you were wondering, to make forms (which display fill-in fields, checkboxes, radio buttons, and so on), you use special HTML tags. To make the forms work, you must set them up on to interact with a Web server, a task which -- unfortunately -- is beyond the scope of this book.

Tags for Links

If you absorbed most of the information about tags for text, you should be able to fire up a word processor and use the information to make a simple HTML document with headings, lists, emphasized text, and so on. Armed with that knowledge, you can make lots of simple Web pages, but few Web pages feel complete without links. Links are in many ways the most interesting part of the Web. Links enable you to move quickly from one place to another on the Web. If you serve your Web page from a site in San Francisco, but make a link to a Web page stored on a machine in London, someone clicking on your link is instantly (or somewhat instantly) able to look at the page stored in London. Links come in three flavors: links to other pages, links to other Internet resources, and links within a page.

Linking to Other Pages

To make a link to a different page, you need to know the URL of that page. If the page isn't part of your Web site, use a Web browser to find the page, and then copy the URL. You can then paste the URL into your HTML code. The Live From Antarctica link shown in figure 26.7 has the following code:

The first <a> tag has an href attribute (href stands for Hypertextual REFerence.) The href attribute tells a Web browser what to do with the link, and in this case it tells the browser to jump to http://quest.arc.nasa.gov/livefrom/livefrom.html if someone clicks the text between the two <a> tags.

Figure 26.7: Web browsers usually display linked text in a different color and with an underline.

To create a link to another page on your Web site, don't use the usual full URL in the href attribute; instead, use a relative URL. A relative URL doesn't include the name of the server, and it only includes enough of the path to clarify where the other Web page is.

Note: If all this talk of URLs is making your head swim, skip back to chapter 6, "Addressing & URLs" for a discussion of the various parts of a URL.

For example, I serve my friend Geoff's home page from my Web site. The full URL to Geoff's page is:

http://king.tidbits.com/geoff/geoff.html

My home page is also on my server, but it's not in the geoff folder, so the link from my home page to Geoff's home page has a relative URL, like this:

This relative URL tells a browser to go back to the root directory, then into the geoff folder, and finally to the geoff.html document. It doesn't include http://king.tidbits.com because both pages are on the same server.

As another example, Geoff has a file in his geoff folder called reno.html (Geoff grew up in Nevada), and the link from Geoff's geoff.html home page to his reno page, looks like this:

Because the document called reno.html is in the same folder as the geoff.html document, the relative URL doesn't need to include http:/king.tidbits.com/geoff/. It only needs to include reno.html, the name of the document that you see if you click the Reno, Nevada link.

Note: If you are making a simple home page with a few related HTML documents and graphics, store all the files in the same folder on your Mac. The people who serve your files will almost certainly keep them in the same folder, and your relative URLs will work like a charm when you test them and when they go live on the Web. Use the same type of relative link that Geoff uses for his reno.html document.

If you need to do relative URLs that go back to the root and then down a different path, ask the people who will serve your page how you should handle the URL.

Links to Other Internet Resources

You can make a link to anything that has a URL, although many Web browsers have trouble with FTP URLs. If you give an FTP URL, be sure to also mention the URL in the regular text of the Web page. Links to Gopher files tend to work well, although be careful since Gopher URLs are usually extremely ugly and hard to retype correctly. The code below shows the HTML for an unordered list with links to two Gopher items, and figure 26.8 shows what the list looks like in a Web browser.

Figure 26.8: An unordered list with links to Gopher items.

Links within a Web Page

You also can use links to help people get around within a page. For example, you might make a linked table of contents of <h1>- or <h2>-tagged titles.

To create an internal link, you first do some special HTML tagging at the target of the link. The target is where viewers end up after they click. Here's an example:

In the example, Other Penguins on the Web is surrounded by an <a> tag pair, with a name attribute. The name attribute gives the target the name other penguins.

After naming the target, you set up the link like this:

When someone views the link, the text between the <a> tags appears underlined. The <a> tags are a bit unusual, because the beginning tag has a special href attribute, which includes #other penguins, the target name that you set up at the target of the link. If someone clicks the underlined word "information," the Web browser will look for the other penguins target that you set up on the same page.

Web Graphics

When you put graphics on a Web page, you can do so in two ways: inline or external. Inline graphics display on the page, right "in line" with other text on the same line, should you choose to put text on that line. External graphics don't show on a page; instead, they show in a separate window, usually the window of a helper application like JPEGView (see chapter 25, "World Wide Web").

Today's crop of Web browsers limit you to viewing two graphic formats: GIF and JPEG. Both formats use internal compression routines that make the graphics smaller, thus decreasing download times. When you put a graphic on the Web, you have to decide whether to use GIF or JPEG. The short answer is that you want to use GIF, though JPEG images have a place in some situations, and may play a greater role in the future.

GIF versus JPEG

GIF stands for Graphics Interchange Format. It is the only format that all graphics-savvy Web browsers can display inline, so it's the one to use for graphics that you want everyone to see. The bad part about GIF graphics is that they are limited to 256 colors and typically don't compress as well as JPEG graphics do.

The latest version of the GIF specification (version 89a) supports transparent mode, a nifty option that lets you make one color in a graphic transparent. GIFs are shaped like rectangles, but if you make a GIF's background color transparent, you can end up with a GIF that looks like an irregularly shaped object, such as a penguin (see figure 26.9).

Figure 26.9: Ingrid with a transparent background versus Ingrid with a dark background.

GIFs also can be interlaced, meaning the image is saved in alternating horizontal bands. If you looked at the first half of an interlaced GIF, you would see a low-resolution, striped image, with blank horizontal stripes representing the second half of the image. Some Web browsers display interlaced GIFs as they read them -- first they display every eighth line, then every fourth line, then every second line, and then every line. This display method makes it so people waiting for the image to load can quickly make out what the final image will look like. Other browsers bring in a rough version of the graphic and gradually refine it.

JPEG stands for Joint Photographic Experts Group. It is a graphics compression format that works best for digitized photographs, particularly if they depict photos of natural scenes, such as forests or sunsets. JPEG is a lossy format, meaning that when it does its compression magic, it loses some of the detail in the graphic. JPEG was designed to lose details that the human eye won't notice, particularly details that wouldn't be noticed from an image with gradual changes in shading and color. Sometimes the loss of detail means the graphic looks fuzzy; other times you can't tell at all. JPEG is most likely to lose too much detail with images that have sudden transitions from one color to another, so JPEG tends to be a poor format for graphics containing text, line drawings, and navigational icons.

JPEG images can have millions of colors instead of a measly 256. They have better compression, but many browsers can't display them without the assistance of a helper application (where the picture displays in a different program's window).

The bottom line: Use GIF unless you have a photograph that looks much nicer or compresses significantly tighter as a JPEG.

Converting Images into GIF or JPEG Format

Lots of commercial graphics programs can save in GIF or JPEG format, and if you own Photoshop, Color It!, or any of a number of other applications, you can save files as GIFs or JPEGs. If your collection of graphics programs can't Save As to GIF or JPEG format (or doesn't offer special options such as interlacing or transparencies), pick up a utility from the Internet that does it for you. Except for the Interactive Graphics Renderer (which you use through a Web site), the utilities mentioned in this section are available on the Info-Mac archives and at the FTP site for this book.

ftp://ftp.tidbits.com/pub/tidbits/tisk/util/

Graphic Converter

Graphic Converter is my favorite utility for working with Web graphics because it offers the most features of any of the non-commercial programs (although clip2gif is simpler to use and offers a number of the key features). See figure 26.10. Graphic Converter can open PICTs, TIFFs, JPEGs, GIFs, and a whole menagerie of less common formats.

Figure 26.10: Graphic Converter's basic interface shows the image, a "toolbox," and an Information palette.

Graphic Converter has more extensive editing features than other shareware and freeware options and offers all the important features specific to Web graphics:

Currently, Graphic Converter 2.0.9 runs on Power Macs in emulation. Thorsten Lemke, the author, recently released a beta PowerPC-native version, which may be in final form by the time you read this book. Graphic Converter is shareware, and it costs $30 to $35, depending on where you live.

Tags for an Inline Graphic

As I hope you recall, any Web browser that can display graphics will show an inline graphic right on a page. Inline graphics use an <img> tag, and the <img> tag usually has a few attributes inside it. Here's an example:

Here's what's going on with the attributes in the example:

Note: You can make an inline image act as a link by enclosing it in <a> tags like this:

This link causes a browser to open a file called more.html after someone clicks the ingrid.gif image.

An inline image can also be the target of a link -- just use the name attribute in the <a> tag, like this:

In this case, someone could create a link that would cause a browser to jump to the place where ingrid.gif is displayed. The link would include an href="#picture" attribute.

Lots of Web pages use small GIFs as bullets and as navigational devices (such as arrows); these GIFs are sometimes called picons. You can make your own picons in a graphics program (just save them as GIFs), or you can download them from Web pages people have set up in order to share them.

http://www.uncg.edu:80/~rdralph/icons/

http://www.ncsa.uiuc.edu/General/Icons/

http://helix.rice.edu/Icons/

TOC Glossary Forward